import React, { useEffect ,useState} from "react";
import Aler from "./components/Aler"
import "./index.css"
import { getCityApi} from "../../api/city"
import { withRouter } from "react-router-dom";
const City= (props) => {
    const [city, setCity] = useState([])
    const CityList=async ()=>{
        let res=await getCityApi()
        setCity(res)
    }
    useEffect(() => {
        CityList()
    }, [])
    const searchStore = (val)=>{
        props.history.replace({pathname:"/Layout/Hotpoint",state:{city:val}})
    }
    
    return (
        <div>
        <Aler>
            <div className="top">
                <p>城市</p>
            </div>
            <div className="bot">
                 <ul className="tab">
                    {
                        city.map(item=><li onClick={()=>searchStore(item.city)} key={item.id}>{item.city}</li>)
                    }
                </ul>
            </div>
        </Aler>
    </div>
    )
}
export default withRouter(City)